<template>
  <div class="header">
    <div class="slott"><slot></slot></div>

    <!-- <img :src="pylst.coverImgUrl" /> -->
    <router-link to="/"
      ><span class="iconfont icon-zuobian1"></span
    ></router-link>
    <div class="wrap">
      <div class="left">
        <img :src="pylst.coverImgUrl" /><span class="icon">歌单</span
        ><span class="playCount">{{ pylst.playCount | formatNum }}万</span>
      </div>

      <div class="right">
        <h2>{{ pylst.name }}</h2>
        <div class="lsthd_auth">
          <a class="lsthd_link"
            ><div class="lsthd_ava">
              <img :src="pylst.creator.avatarUrl" />
            </div>
            {{ pylst.creator.nickname }}</a
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Songreview",
  data() {
    return {};
  },
  props: ["pylst"],
  filters: {
    formatNum(val) {
      return (val / 10000).toFixed(2);
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  background-color: #829d8c;
  height: 280px;
  overflow: hidden;
  position: relative;

  img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    width: 100%;
    position: absolute;
    z-index: 1;
  }
  span {
    position: absolute;
    top: 14px;
    left: 10px;
    z-index: 8;
    text-decoration: none;
    color: #fff;
  }

  .wrap {
    display: flex;
    z-index: 2;
    padding: 28px 54px;
    overflow: hidden;
    img {
      width: 100%;
      vertical-align: middle;
    }
    .left {
      position: relative;
      width: 114px;
      height: 114px;
      background-color: #e2e2e3;
      overflow: hidden;
      text-overflow: ellipsis;

      white-space: nowrap;
      word-break: normal;
      @media screen and (min-width: 360px) {
        width: 114px;
        height: 114px;
      }
      @media screen and (min-width: 414px) {
        width: 145px;
        height: 145px;
      }
      @media screen and (min-width: 768px) {
        width: 200px;
        height: 200px;
      }
    }
  }

  .icon {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 0;
    padding: 0 8px;
    height: 17px;
    color: #fff;
    font-size: 9px;
    text-align: center;
    line-height: 17px;
    background-color: rgba(2, 1, 1, 0.8);
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
  }
  .playCount {
    position: absolute;
    right: 2px;
    top: 0;
    z-index: 3;
    padding-left: 20px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
    background: url()
      0px no-repeat;
    background-size: 21px 11px;
  }
  .playCount::after {
    content: " ";
    position: absolute;
    left: 2px;
    top: 0;
    width: 100%;
    height: 18px;
    z-index: 2;
    background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.2)
    );
  }
  .right {
    padding-left: 20px;
    flex: 1 1 auto;
    h2,
    .lsthd_auth {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: nowrap;
      word-break: normal;
    }
    h2 {
      position: absolute;
      padding-top: 1px;
      font-size: 17px;
      line-height: 1.3;
      color: #fefefe;
      height: 44px;
      display: -webkit-box;
      -webkit-box-pack: center;
      z-index: 3;
    }
    .lsthd_auth {
      display: block;
      position: relative;
      margin-top: 80px;
      z-index: 3;
      font-size: 14px;
      .lsthd_link {
        display: inline-block;
        color: hsla(0, 0%, 100%, 0.7);
        .lsthd_ava {
          display: inline-block;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 5px;
          img {
            border-radius: 50%;
            width: 30px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>